<template>
	<view>
		<header-box></header-box>
		<view class="content">
			<view class="card1">
				<view class="money flex-center">3000<text>VDS</text></view>
			</view>
			<view class="card2">
				<view class="title">质押规则</view>
				<view class="desc">此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，此处是质押规则的文案，</view>
				<button class="btn flex-center">
					确定付款
				</button>
			</view>
		</view>
		<footer-box tabIndex="1"/>
	</view>
</template>

<script>
	import HeaderBox from '@/components/headerBox.vue'
	import FooterBox from '@/components/footerBox.vue'
	export default {
		components:{
			HeaderBox,FooterBox
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
	.card1{
		height: 260rpx;
		background: url('/static/create-card1.png') no-repeat 0 0;
		background-size: 100% 100%;
		margin: 40rpx 0 60rpx;
		position: relative;
		.money{
			width: 440rpx;
			height: 99rpx;
			position: absolute;
			left:136rpx;
			top: 122rpx;
			font-size: 90rpx;
			color: #3df1be;
			text{
				font-size: 40rpx;
				position: relative;
				top:17rpx;
			}
		}
	}
	.card2{
		min-height: 500rpx;
		background-color: #202634;
		border-radius: 30rpx;
		padding: 30rpx 30rpx 100rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		.title{
			font-size: 34rpx;
			color: #ffffff;
			margin-bottom: 15rpx;
		}
		.desc{
			font-size: 30rpx;
			line-height: 40rpx;
			color: #898ea3;
			text-align: justify;
		}
		.btn{
			height: 94rpx;
			background: url('/static/login-btn.png') no-repeat 0 0;
			background-size: 100% 100%;
			font-size: 34rpx;
			color: #ffffff;
			margin-top: 130rpx;
		}
	}
</style>
